<template>
    <div class="menu w-100">
      <ul>
        <li class="menu-li">
          <div class="menu-search">
            <trace-input :borderColor="inputBorderColor" @search="handleSearch" placeholder="spring" />
            <button :style="background" @click="search()">搜索</button>
          </div>
        </li>
        <li class="menu-li">
          <object class="swfzone"
                  style="visibility: visible; background: rgba(255,255,255,.0);"
                  data="./static/image/5091098_140920736599_2.swf"
                  type="application/x-shockwave-flash" width="225" height="100">
            <param name="allowfullscreen" value="true">
            <param name="wmode" value="opaque">
          </object>
        </li>
        <li class="menu-li">
          <h3>
            <svg-icon icon-class="star" />
            {{menu.contact.title}}
          </h3>
          <img v-lazy="menu.contact.weChatCode" style="width: 210px; height: 210px">
        </li>
        <li class="menu-li">
          <h3>
            <svg-icon icon-class="rocket" />
            {{menu.hot.title}}
          </h3>
          <ul>
            <li class="article-li"
                v-for="article in menu.hot.articles"
                :key="article.id">
              <img @click="selectItem(article.id)" class="article-pic" v-lazy="article.image" :alt="article.title" />
              <div class="hot-article">
                <h4 @click="selectItem(article.id)">{{article.title}}</h4>
                <ul>
                  <li>
                    <span class="iconfont"
                          @mouseenter="mouseStart(2, $event)"
                          @mouseleave="mouseEnd(2, $event)">
                      &#xe604;&nbsp;&nbsp;{{article.date}}
                    </span>
                  </li>
                  <li>
                    <span class="iconfont"
                          @mouseenter="mouseStart(2, $event)"
                          @mouseleave="mouseEnd(2, $event)">
                      &#xe637;&nbsp;&nbsp;{{(menu.hot.articles.length - (menu.hot.articles.length - article.id)) * 132}}
                    </span>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </li>
        <li class="menu-li">
          <h3>
            <svg-icon icon-class="dice" />
            {{menu.random.title}}
          </h3>
          <ul>
            <li class="article-li"
                v-for="article in menu.random.articles"
                :key="article.id">
              <img @click="selectItem(article.id)" class="article-pic" v-lazy="article.image" :alt="article.title" />
              <div class="hot-article">
                <h4 @click="selectItem(article.id)">{{article.title}}</h4>
                <ul>
                  <li>
                    <span class="iconfont"
                          @mouseenter="mouseStart(2, $event)"
                          @mouseleave="mouseEnd(2, $event)">
                      &#xe604;&nbsp;&nbsp;{{article.date}}
                    </span>
                  </li>
                  <li>
                    <span class="iconfont"
                          @mouseenter="mouseStart(2, $event)"
                          @mouseleave="mouseEnd(2, $event)">
                      &#xe637;&nbsp;&nbsp;{{(menu.random.articles.length - (menu.random.articles.length - article.id)) * 132}}
                    </span>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </li>
        <li class="menu-li">
          <h3>
            <svg-icon icon-class="magnet" />
            {{menu.induction.title}}
          </h3>
          <ul class="induction-ul"
              v-for="(item, index) in menu.induction.data"
              :key="index">
            <li
              @click="selectInduction(item)"
              @mouseenter="mouseStart(2, $event)"
              @mouseleave="mouseEnd(2, $event)">
              {{item}}
            </li>
          </ul>
        </li>
        <li class="menu-li" style="align-items: stretch;">
          <h3>
            <svg-icon icon-class="pushpin" />
            {{menu.tags.title}}
          </h3>
          <div class="tag">
            <span v-for="item in menu.tags.tag"
                  :key="item.id"
                  @click="selectTag(item.id)"
                  @mouseenter="mouseStart(1, $event)"
                  @mouseleave="mouseEnd(1, $event)">
              {{item.name}}
            </span>
          </div>
        </li>
        <li class="menu-li">
          <h3>
            <svg-icon icon-class="volume" />
            {{menu.comments.title}}
          </h3>
          <ul class="comment-ul">
            <li v-for="item in menu.comments.comment"
                :key="item.id"
                :data-id="item.id"
                @mouseenter="mouseStart(3, $event)"
                @mouseleave="mouseEnd(3, $event)">
              <div class="comment">
                <img v-lazy="item.avatar" :alt="item.nickName" />
                <div class="right-box">
                  <span class="author" :style="[item.id == selectId ? color : '']">
                    {{item.nickName}}
                  </span>
                  <p class="comment-text">{{item.content}}</p>
                </div>
              </div>
            </li>
          </ul>
        </li>
        <li class="menu-li">
          <h3>
            <svg-icon icon-class="paper-airplane" />
            {{menu.contacts.title}}
          </h3>
          <a :href="menu.contacts.path">
            <img class="connection" v-lazy="menu.contacts.image" alt="QQ:1191283678" />
          </a>
        </li>
      </ul>
    </div>
</template>

<script>
import TraceInput from '@/components/TraceInput'
import { mapGetters } from 'vuex'

export default {
  name: 'HomeMenu',
  props: {
    menu: Object
  },
  data () {
    return {
      background: {
        'background': '',
        'border': ''
      },
      color: {
        'color': ''
      },
      selectId: 0,
      searchValue: '',
      inputBorderColor: ''
    }
  },
  mounted () {
    const color = this.getBackground
    this.background.background = color
    this.background.border = '1px ' + color + ' solid'
    this.inputBorderColor = color
  },
  methods: {
    handleSearch (searchValue) {
      this.searchValue = searchValue
    },
    // 搜索
    search () {
      this.$emit('search', this.searchValue)
    },
    // 选择归档
    selectInduction (date) {
      this.$emit('induction', date)
    },
    // 选择标签
    selectTag (id) {
      this.$emit('tag', id)
    },
    mouseStart (type, e) {
      if (type === 1) {
        e.currentTarget.className = 'animated swing'
        e.currentTarget.style.background = this.getBackground
      }
      if (type === 2) {
        e.currentTarget.style.color = this.getBackground
      }
      if (type === 3) {
        this.selectId = e.target.dataset.id
        this.color.color = this.getBackground
      }
      e.currentTarget.style.borderColor = this.getBackground
    },
    mouseEnd (type, e) {
      if (type === 1) {
        e.currentTarget.className = ''
        e.currentTarget.style.background = ''
      }
      if (type === 2) {
        e.currentTarget.style.color = ''
      }
      if (type === 3) {
        this.selectId = ''
        this.color.color = ''
      }
      e.currentTarget.style.borderColor = ''
    },
    selectItem (id) {
      this.$router.push({
        path: `/content_detail/${id}`
      })
    }
  },
  computed: {
    ...mapGetters([
      'getBackground'
    ])
  },
  components: {
    TraceInput
  }
}
</script>

<style scoped lang="stylus">
  @import "~styles/custom/mixins.styl"
  .svg-icon
    font-size 16px
    margin-right 4px

  .iconfont
    font-size 10px
    padding-right 6px
    color #A2A2A2

  .menu
    .menu-li
      display flex
      flex-flow column
      background #fff
      display flex
      justify-content center
      align-items center
      margin-bottom 10px
      opacity 0.8
      webkit-box-shadow 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important
      box-shadow 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important
      .menu-search
        overflow hidden
        display flex
        height 40px
        flex-flow row
        justify-content center
        align-items center
        input
          font inherit
          border 1px solid #dcdfe6
          box-sizing: border-box
          padding 0 15px
          background: #FFF
          color: #606266
          box-shadow 1px 1px 1px #F7F7F7 inset
          -moz-box-shadow 1px 1px 1px #F7F7F7 inset
          height 26px
          line-height 26px
          width 65% !important
          border-radius 0
          border-right 1px
          -moz-border-radius 0
          font 400 13.3333px Arial
        button
          cursor pointer
          font inherit
          font-size 14px
          line-height 26px
          height 26px
          border-radius: 4px
          border 1px solid #dcdfe6
          color #FFF
          padding 0 16px
          text-align center
          border-radius 0
      .swfzone
        padding-left 16px
      h3
        overflow hidden
        display flex
        align-self stretch
        font-weight: normal;
        font-size: 14px;
        line-height: 38px;
        padding: 0 15px;
        margin-bottom 0px
        align-items center
      ul
        width 100% !important
      img
        margin-bottom 10px
      .article-li
        display flex
        flex-flow row
        padding 9px
        border:1px solid #FFF
        border-bottom-color #E6E6EB
        margin 0 10px
        .article-pic
          height 50px
          width 70px
          border-radius .06rem
          cursor pointer
        .hot-article
          padding-left 8px
          h4
            line-height 20px
            font-size 12px
            font-weight normal
            cursor pointer
            width 144px
            ellipsis()
          ul
            display flex
            flex-direction row
            justify-content flex-start
            align-items center
            li
              font-size 14px
              padding-top 4px
              cursor pointer
              border-bottom none
            li:last-child
              margin-left 10px
      .article-li:last-child
        border-bottom none
      .induction-ul
        list-style disc inside
        display flex
        align-self stretch
        flex-flow column
        line-height 24px
        padding 0 18px 8px 18px
        color #333
        cursor pointer
        li
          font-size 15px
      .tag
        padding 0 14px 4px 14px
        cursor pointer
        span
          float left
          display block
          height 24px
          border 1px #C2C2C2 solid
          border-radius 2px
          -moz-border-radius 2px
          text-align center
          padding: 0 8px
          line-height: 24px
          margin: 5px 10px 5px 0
          font-size 12px
        span:hover
          color #fff
          border 1px #23BDBD solid
      .comment-ul
        display flex
        align-self stretch
        flex-flow column
        li
          padding 0 10px 4px 10px
          border 1px solid #FFF
          border-bottom-color #E6E6EB
          cursor pointer
        li:last-child
          border-bottom-color #fff
        li:hover
          border 1px solid rgba(35,189,189,.8)
          box-shadow 0 0 20px 6px rgba(60, 60, 60, .1.8)
          .author
            color #23BDBD
        .comment
          padding 10px 6px 0 6px
          display flex
          flex-flow row
          align-self stretch
          img
            width 40px
            height 40px
          .right-box
            padding-left 10px
            line-height 20px
            ellipsis()
            .author
              white-space nowrap
              overflow hidden
              -ms-text-overflow: ellipsis
              text-overflow: ellipsis
              font-size 14px
              font-weight bold
            .comment-text
              color #666
              white-space nowrap
              overflow hidden
              -ms-text-overflow ellipsis
              font-size 14px
              text-overflow ellipsis
      a
        align-self: baseline
        .connection
          width 79px
          padding-left 14px
</style>
